<template>
	<div class="goodsinfo-container">

		<transition 
		 @before-enter="beforeEnter"
		 @enter="enter"
		 @after-enter="afterEnter"
		>
			<!-- ref 基本用法，本页面获取dom元素  通过this.$refs.ball获得div这个DOM元素-->
			<!-- https://www.jianshu.com/p/623c8b009a85 -->
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		
		<!-- 轮播图区域 借助于mui中的card.html 只有body,没有页眉和页脚-->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<!-- 将轮播图组件以标签形式放入到页面上 -->
					<swiper :lunbotuList="lunbotu" :isFull="false"></swiper>
				</div>
			</div>
		</div>

		<!-- 商品购买区域 借助于mui中的card.html 有页眉和body, 没有页脚-->
		<div class="mui-card">
			<div class="mui-card-header">{{ goodsinfo.title }}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价:<del>¥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价:<span class="now_price">¥{{ goodsinfo.sell_price }}</span>	
					</p>
					<p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
						<!-- 分析: 如何实现加入购物车的时候, 拿到选择的数量 -->
						<!-- 1. 经过分析发现 加入购物车这个按钮属于 GoodsInfo组件  而数字属于 goodsinfo_numbox组件 -->
						<!-- 2. 由于涉及到父子组件的嵌套了， 所以无法直接在 GoodsInfo页面中获取到选中的商品的数量值-->
						<!-- 3. 怎么解决这个问题： 涉及到了  子组件向父组件传值了(事件调用机制) -->
						<!-- 4. 事件调用的本质： 父组件传递方法(先在methods中定义一个方法,方法中带有参数), 子组件调用这个方法（本项目中当文本框的数字发生改变时，调用父组件传递过来的方法）, 同时把数据作为参数传递给这个方法 -->
					</p>
				</div>
			</div>
		</div>

		<!-- 商品参数区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:{{ goodsinfo.goods_no }}</p>
					<p>库存情况:{{ goodsinfo.stock_quantity }}件</p>
					<p>上架时间:{{ goodsinfo.add_time | dateFormat }}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<!-- 这里由于按钮的父元素 .mui-card-footer用了flex布局 导致在一行上显示, 即使用了<br>还是无法换行  所以要将父元素的display:flex改一下-->
				<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
			</div>
		</div>

	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	// 导入轮播图组件
	import swiper from '../subcomponents/swiper.vue'
	//导入商品信息数字输入框组件
	import numbox from '../subcomponents/goodsinfo_numbox.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id, //将路由参数对象中的 id 挂载到 data 上, 方便后期调用
				lunbotu: [],
				goodsinfo: {}, //获取到的商品信息
				ballFlag: false, //控制小球的隐藏和显示的标识符
				selectedCount: 1  //用户选中的商品数量，默认认为用户买1个
			}
		},
		created() {
			this.getLunbotu(),
			this.getGoodsInfo()
		},
		methods:{
			getLunbotu() {
				this.$http.get('api/getthumimages/' + this.id).then(result => {
					if (result.body.status === 0) {					
						// 轮播图组件中的img中的src属性值是item.img 返回来的数据是item.src
						// 所以要先循环轮播图数组的每一项, 为item添加img属性 
						result.body.message.forEach( item=> {
							item.img = item.src
						})
						this.lunbotu = result.body.message
					}else{
						Toast('获取图片失败')
					}
				})
			},
			getGoodsInfo() {
				// 获取商品信息
				this.$http.get('api/goods/getinfo/' + this.id).then(result => {
					if(result.body.status === 0){
						this.goodsinfo = result.body.message[0]
					}else{
						Toast('获取商品参数失败')
					}
				})
			},
			goDesc(id){
				// 点击使用编程式导航 跳转到 图文介绍页面
				this.$router.push( {name:"goodsdesc", params:{id}} )
			},
			goComment(id) {
				//点击使用编程式导航 跳转到 评论页面
				this.$router.push( {name:"goodscomment", params:{id}} )
			},
			addToShopCar() {
				//添加到购物车
				this.ballFlag = !this.ballFlag

				// { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false }
				// 拼接出一个, 要保存到 store中 car数组里的商品信息对象
				var goodsinfo = {
					id: this.id,
					count: this.selectedCount,
					price: this.goodsinfo.sell_price,
					selected: true
				}
				// 调用 store中的mutations来将商品加入购物车
				this.$store.commit('addToCar', goodsinfo)
			},
			beforeEnter(el) {
				el.style.transform = 'translate(0, 0)'
			},
			enter(el,done) {
				el.offsetWidth  //没有这一句代码,出不来动画

				//小球动画优化思路:
				//1. 先分析导致动画不准确的本质原因: 我们把 小球 最终位移到的位置,已经局限在了
				//	 某一分辨率下的和 滚动条未滚动的情况下
				//2. 只要分辨率和测试的时候不一样, 或者滚动条有一定的滚动距离之后, 问题就出现了
				//3. 因此, 经过分析, 得到结论, 不能把 位置的横纵坐标写死了,而是应该根据不同的情况	    , 动态计算这个坐标值 
				//4：得出解题思路：先得到徽标的纵横坐标,再得到小球的纵横坐标,然后让y值求差,x值也求差, 得到的结果就是小球纵横坐标要位移的距离
				//5. 如何获取小球和徽标的位置?   dom对象.getBoundingClientRect()
				//https://www.jianshu.com/p/41f5f746ddf8 js中getBoundingClientRect()方法详解

				//获取小球在页面中的位置
				const ballPosition = this.$refs.ball.getBoundingClientRect()	

				//获取徽标在页面中的位置
				const badgePosition = document.getElementById('badge').getBoundingClientRect()

				const xDist = badgePosition.left - ballPosition.left
				const yDist = badgePosition.top - ballPosition.top

				// es6中模板字符串 字符串拼接
				el.style.transform = `translate(${xDist}px, ${yDist}px)`
				el.style.transition ='all 0.5s cubic-bezier(0.4, -0.3, 1.0, 0.68)'
				done()   //相当于调用了afterEnter(el)
			},
			afterEnter(el) {
				this.ballFlag = !this.ballFlag
			},
			getSelectedCount(count) {
				//当子组件把 选中的数量传递给父组件的时候, 把选中的值保存到data上
				this.selectedCount = count
				// console.log('父组件从子组件中拿到的数量值为:' + this.selectedCount)
			}
		},
		// 注册轮播图组件
		components: {
			swiper,
			numbox
		}
	}
</script>

<style lang="scss" scoped>
	.goodsinfo-container{
		background-color: #eee;
		overflow: hidden;
		.now_price{
			color:red;
			font-size: 16px;
			font-weight: bold;
		}
		.mui-card-footer {
			display:block;
			button{
				margin: 15px 0;
			}
		}
		.ball{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
			position: absolute;
			z-index: 99;
			top: 390px;
			left:146px;
		}
	}
</style>